<template>
  <a-modal
    :maskClosable="false"
    :keyboard="false"
    :title="title"
    :width="width"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :destroyOnClose="true"
    :cancelText="$t('m.common.button.close')">
    <a-spin :spinning="spinning != 0">
    <a-form :form="form"
            layout="horizontal"
            :hideRequiredMark="false"
            style="">
      <a-row class="grid-row">
        <a-col v-bind="colLayout1.cols" class="grid-col">
          <a-form-item :label="$t('m.common.label.catalog')" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-tree-select
              v-decorator="['parentId', validatorRules.parentId]"
              :treeDefaultExpandAll="true"
              :tree-data="treeData"
            >

            </a-tree-select>
          </a-form-item>
        </a-col>

      </a-row>

    </a-form>
    <template slot="footer">
      <a-button type="primary" @click="handleOk">{{ $t('m.common.button.ok') }}</a-button>
      <a-button key="close" @click="handleCancel">{{ $t('m.common.button.close') }}</a-button>
    </template>
    </a-spin>
  </a-modal>
</template>

<script>

  import { getAction,httpAction} from '@/api/manage'
  import YchConstant from "@/api/YchConstant";
  import {GardLayoutMixin} from '@/mixins/GardLayoutMixin'

  export default {
    name: "BpmCollectionDialog",
    mixins: [GardLayoutMixin],
    data() {
      return {
        visible: false,
        form: this.$form.createForm(this),
        model: {},
        spinning: 0,//遮罩
        width:'500px',
        labelCol: { span: 4 },
        wrapperCol: { span: 20 },
        title:this.$t('m.bpm.other.bpmCollection'),
        url:{
          getCollectionCatalogTree: YchConstant.PREFIX_SYSTEM + '/collection/getCollectionCatalogTree/v1',
          add:YchConstant.PREFIX_SYSTEM + '/collection/add',
        },
        treeData: [],
        selectedKeys:[],
        validatorRules: {
          parentId: {
            rules: [{"required": true, "message": this.$t('m.common.tip.catalog_verify')}]
          },
        },
        disabledRules: {
          parentId:false
        },
        processInstanceId:"",
        processInstanceName:""
      }
    },
    created() {

    },
    methods: {
      handleOk(){
        // 触发表单验证
        this.form.validateFields(async (err, values) => {
          if (!err) {
            values["type"]="collection";
            values["collectionValueType"]="process";
            values["collectionValue"]=this.processInstanceId;
            values["name"]=this.processInstanceName
            this.spinning++
            httpAction(this.url.add, values, "post").then((res) => {
              if (res.success) {
                this.messageUtil.success(this.$t('m.common.tip.operate_success'))
                this.handleCancel()
              } else {
                this.messageUtil.warning(res.message)
              }
            }).finally(() => {
              this.spinning--
            })
          }
        })
      },
      handleCancel() {
        this.visible = false;
      },
      open(processInstanceId,processInstanceName){
        if(!processInstanceId){
          return;
        }
        this.visible = true
        this.processInstanceId = processInstanceId
        this.processInstanceName = processInstanceName
        this.spinning++
        getAction(this.url.getCollectionCatalogTree).then((res) => {
          if (res.success) {
            this.treeData = res.result
          }
        }).finally(() => {
          this.spinning--
        })
      },
    }
  }
</script>
<style lang="less" scoped>
  /deep/ .ant-modal-body {
    padding: 5px 24px 5px 24px !important;
  }
</style>
